<script setup>
import { ref, getCurrentInstance, reactive, computed, nextTick } from "vue";
import { useRouter } from "vue-router";

import moment from "moment";
import { Search, Refresh, Delete } from "@element-plus/icons-vue";
import api from "@/api";

import ztdIcon from "@/assets/images/project/ztd.png";
import areaIcon from "@/assets/images/project/area.png";
import cldfqIcon from "@/assets/images/project/cldfq.png";
import ljdcIcon from "@/assets/images/project/ljdc.png";
const { proxy } = getCurrentInstance();

const router = useRouter();

const envir = reactive({
  tabs: [
    {
      name: "主通道",
      icon: ztdIcon,
      value: 0,
      algorithmType: "0",
    },
    {
      name: "作业面",
      icon: areaIcon,
      value: 0,
      algorithmType: "1",
    },
    {
      name: "垃圾堆场",
      icon: ljdcIcon,
      value: 0,
      algorithmType: "2",
    },
    {
      name: "材料堆放区",
      icon: cldfqIcon,
      value: 0,
      algorithmType: "3",
    },
  ],
  active: -1,
  form: {
    deviceId: "",
    startDate: "",
    endDate: "",
    algorithmType: "",
    eventType: "",
  },
  total: 0,
  monthTotal: 0,
  danger: 0,
  resType: true,
  times: "",
  list: [],
  dialogShow: false,
  activeImgUrl: "",
  statisticUrl: "",
  topLoad: true,
  botLoad: false,
  previewList: [],
  previewShow: false,
  previewEvent: {},
  previewActive: 0,
  isDeleting: false,
  deleteWord: "删除",
  deleteList: [],
  deleteDialogVisible: false,
});

const pagination = reactive({
  currentPage: 1,
  pageSize: 9,
  total: 1,
  currentImgList: [],
});

const infoOpts = [
  {
    label: "全部",
    value: "",
  },
];

const etypeOpts = [
  {
    label: "全部",
    value: "",
  },
  {
    label: "堆场垃圾未清理",
    value: "rubbish_not_clean",
  },
  {
    label: "主通道车辆占道",
    value: "channel_not_clean",
  },
  {
    label: "材料未按规范堆放",
    value: "material_not_clean",
  },
  {
    label: "作业面建材未清理",
    value: "working_area_not_clean",
  },
];

const stypeOpts = [
  {
    label: "全部",
    value: "",
  },
  {
    label: "主通道",
    value: "0",
  },
  {
    label: "作业面",
    value: "1",
  },
  {
    label: "垃圾堆场",
    value: "2",
  },
  {
    label: "材料堆放区",
    value: "3",
  },
];

proxy._GLOBAL.DEVICEINFO.forEach((item) => {
  infoOpts.push({
    label: item.deviceInfo,
    value: item.deviceId,
  });
});

const getEtype = computed(() => (item) => {
  return item === "rubbish_not_clean"
    ? "堆场垃圾未清理"
    : item === "channel_not_clean"
    ? "主通道车辆占道"
    : item === "material_not_clean"
    ? "材料未按规范堆放"
    : item === "working_area_not_clean"
    ? "作业面建材未清理"
    : "--";
});

const getDeviceName = computed(() => (item) => {
  let name = "";
  for (let i = 0, l = proxy._GLOBAL.DEVICEINFO.length; i < l; i++) {
    if (item === proxy._GLOBAL.DEVICEINFO[i].deviceId) {
      name = proxy._GLOBAL.DEVICEINFO[i].deviceInfo;
      break;
    }
  }
  return name;
});

const getLeanInfoData = function () {
  //获取统计信息
  api.envir
    .getLeanInfoByDuration({
      startDate: moment().format("YYYY-MM-01"),
      endDate: moment().add(1, "days").format("YYYY-MM-DD"),
      algorithmType: "lean",
    })
    .then((res) => {
      console.log("res", res);
      if (res) {
        envir.topLoad = false;
        let total = 0;
        console.log("total", res.data);
        res.data.forEach((item) => {
          if (item.algorithmType === 0) {
            total += envir.tabs[0].value = item.eventCount;
          } else if (item.algorithmType === 1) {
            total += envir.tabs[1].value = item.eventCount;
          } else if (item.algorithmType === 2) {
            total += envir.tabs[2].value = item.eventCount;
          } else if (item.algorithmType === 3) {
            total += envir.tabs[3].value = item.eventCount;
          }
        });
        envir.monthTotal = total;
      }
    });
};

//获取列表数据
const getEnvirData = function () {
  envir.botLoad = true;
  api.envir.getleanViolationByDuration(envir.form).then((res) => {
    if (res) {
      envir.botLoad = false;
      envir.statisticUrl = res.statisticUrl;
      envir.list = res.data;
      // console.log(envir.list);
      envir.list.sort((a, b) =>
        new Date(a.time).getTime() < new Date(b.time).getTime() ? 1 : -1
      );
      envir.list.map((item) => {
        item.isSelected = false;
        item.imgUrl = item.imgUrl.replace("1.jpg", "2.jpg");
        return item;
      });
      pagination.total = envir.list.length;
      pagination.currentImgList = envir.list.slice(0, pagination.pageSize);

      //统计总体事件
      envir.total = res.data.length;

      //如果是列表状态，右侧预览详情同步调整
      if (!envir.resType) {
        envir.previewActive = 0;
        //判断是否有数据
        if (envir.list.length > 0) {
          envir.previewEvent = envir.list[0];
        } else {
          envir.previewEvent = {};
        }
      }
    }
  });
};

getLeanInfoData();
getEnvirData();

const itemHandleClick = function (item, index) {
  if (envir.active === index) {
    envir.active = -1;
    envir.form.algorithmType = "";
    envir.form.startDate = "";
    envir.form.endDate = "";
    envir.times = "";
  } else {
    envir.active = index;
    envir.form.algorithmType = item.algorithmType;
    envir.form.startDate = moment().format("YYYY-MM-01");
    envir.form.endDate = moment().format("YYYY-MM-DD");
    envir.times = [
      moment().format("YYYY-MM-01"),
      moment().format("YYYY-MM-DD"),
    ];
  }

  getEnvirData();
};

const erightHandleClick = function (flag) {
  envir.resType = flag;
  envir.previewEvent = {};
  if (!flag && envir.list[0]) {
    envir.previewEvent = envir.list[0];
    envir.previewActive = 0;
  }
};

const onDelete = function () {
  envir.isDeleting = !envir.isDeleting;
  if (envir.isDeleting) {
    envir.deleteWord = "取消";
  } else {
    envir.deleteList = [];
    envir.deleteWord = "删除";
  }
};

const onConfirmDelete = function () {
  envir.deleteDialogVisible = true;
};

const onCancelDeleteButton = function () {
  envir.deleteDialogVisible = false;
};

const onDeleteButtonClick = function (item, index) {
  let realIndex = (pagination.currentPage - 1) * pagination.pageSize + index;
  if (envir.isDeleting) {
    if (!pagination.currentImgList[index].isSelected) {
      pagination.currentImgList[index].isSelected = true;
      envir.list[realIndex].isSelected = true;
    } else {
      pagination.currentImgList[index].isSelected = false;
      envir.list[realIndex].isSelected = false;
    }

    if (envir.deleteList.includes(realIndex)) {
      envir.deleteList.splice(envir.deleteList.indexOf(realIndex), 1);
    } else {
      envir.deleteList.push(realIndex);
    }
  }
};

const onConfirmDeleteButton = function () {
  let deleteData = [];
  for (let i = 0; i < envir.deleteList.length; i++) {
    deleteData.push(
      envir.list[envir.deleteList[i]].imgUrl.replace("2.jpg", "1.jpg")
    );
  }
  envir.deleteDialogVisible = false;
  console.log("deleted data:", deleteData);
  let formData = {
    urlList: deleteData,
    type: "lean",
    datatype: "array",
  };
  api.envir.deleteLeanViolation(formData).then((res) => {
    if (res) {
      getEnvirData();
      getLeanInfoData();
      envir.isDeleting = false;
      envir.deleteList = [];
      envir.deleteWord = "删除";
    }
  });
};

const tableHandleClick = function (item, index) {
  if (index === envir.previewActive) return;
  envir.previewActive = index;
  envir.previewEvent = item;
};

const handlePageChange = function (pageNumber) {
  console.log(pageNumber);
  pagination.currentPage = pageNumber;
  pagination.currentImgList = envir.list.slice(
    (pageNumber - 1) * pagination.pageSize,
    pageNumber * pagination.pageSize
  );
  console.log(pagination.currentImgList);
};

const onSubmit = function () {
  getEnvirData();
};

const onReset = function () {
  envir.form.deviceId = "";
  envir.form.startDate = "";
  envir.form.endDate = "";
  envir.form.algorithmType = "";
  envir.form.eventType = "";
  envir.active = -1;
  envir.times = "";
  getEnvirData();
};

const dateChangeHandleClick = function (date) {
  if (date === null) {
    envir.form.startDate = "";
    envir.form.endDate = "";
  } else {
    envir.form.startDate = moment(date[0]).format("YYYY-MM-DD");
    envir.form.endDate = moment(date[1]).format("YYYY-MM-DD");
  }
};

const expectTimeClick = function () {
  envir.form.deviceId = "";
  envir.form.startDate = moment().format("YYYY-MM-01");
  envir.form.endDate = moment().format("YYYY-MM-DD");
  envir.form.algorithmType = "";
  envir.form.eventType = "";
  envir.active = -1;
  envir.times = [moment().format("YYYY-MM-01"), moment().format("YYYY-MM-DD")];
  getEnvirData();
};

const previewHandleClick = function (url) {
  envir.previewShow = true;
  nextTick(() => {
    document
      .querySelector(".el-image-viewer__canvas img")
      .setAttribute("crossorigin", "anonymous");
  });
  envir.previewList = [envir.statisticUrl + url];
};

const handlePictureLoadError = function (index) {
  let urlSplit = pagination.currentImgList[index].imgUrl.split("_");
  let minute_ori = parseInt(urlSplit[urlSplit.length - 2]);
  let minute_new = minute_ori + 1;
  minute_new = minute_new.toString();
  if (minute_new < 10) {
    minute_new = "0" + minute_new.toString();
  } else {
    minute_new = minute_new.toString();
  }
  urlSplit[urlSplit.length - 2] = minute_new;
  let urlNew = "";
  for (let i = 0; i < urlSplit.length; i++) {
    if (i != urlSplit.length - 1) {
      urlNew = urlNew + urlSplit[i] + "_";
    } else {
      urlNew = urlNew + urlSplit[i];
    }
  }
  // let newUrl = pagination.currentImgList[index].imgUrl.replace(
  //   minute_ori.toString() + "_2.jpg",
  //   minute_new + "_2.jpg"
  // );
  console.log("newurl", urlNew);
  pagination.currentImgList[index].imgUrl = urlNew;
};

const previewCloseHandle = function () {
  envir.previewShow = false;
  envir.previewList = [];
};
</script>

<template>
  <div class="app-container">
    <div class="tabs" v-loading="envir.topLoad">
      <div class="currentTotal">
        <i></i>
        <div class="desc">
          <span class="desc-top">本月统计</span>
          <div class="desc-btm" @click="expectTimeClick">
            <span>{{ moment().format("YYYY-MM-01") }}</span>
            <span>{{ moment().format("YYYY-MM-DD") }}</span>
          </div>
          <div class="value">{{ envir.monthTotal }}</div>
        </div>
      </div>
      <div
        class="tab-item"
        :class="index === envir.active ? 'active' : ''"
        v-for="(item, index) in envir.tabs"
        :key="index"
        @click="itemHandleClick(item, index)"
      >
        <img :src="item.icon" />
        <div class="desc">
          <span class="desc-top">{{ item.name }}</span>
          <!-- <span class="desc-btm">{{ expectTime }}</span> -->
        </div>
        <div class="value">{{ item.value }}</div>
      </div>
    </div>

    <div class="toolbar">
      <el-form :model="envir.form" label-width="80px">
        <el-form-item label="起止时间">
          <el-date-picker
            size="small"
            v-model="envir.times"
            type="daterange"
            range-separator="一"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="dateChangeHandleClick"
          />
        </el-form-item>

        <el-form-item label="设备信息">
          <el-select
            size="small"
            v-model="envir.form.deviceId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in infoOpts"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="事件类型">
          <el-select
            size="small"
            v-model="envir.form.eventType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in etypeOpts"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="设备类型">
          <el-select
            size="small"
            v-model="envir.form.algorithmType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in stypeOpts"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item class="btns">
          <el-button
            :icon="Search"
            size="small"
            type="primary"
            @click="onSubmit"
            color="#8F93F7"
            style="color: #ffffff"
            >搜索</el-button
          >
          <el-button
            color="#FFFFFF"
            :icon="Refresh"
            size="small"
            type="primary"
            @click="onReset"
            >重置</el-button
          >
          <el-button
            size="small"
            color="#8F93F7"
            type="primary"
            style="color: #ffffff"
            @click="onDelete"
          >
            {{ envir.deleteWord }}
          </el-button>
          <el-button
            size="small"
            color="#8F93F7"
            type="primary"
            style="color: #ffffff"
            v-if="envir.isDeleting"
            @click="onConfirmDelete"
          >
            确认删除
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="event-num">
      <div class="e-left">
        <div class="total">
          <span>总体事件：</span>
          <span class="value">{{ envir.total }}</span>
          <font>件</font>
        </div>
      </div>
      <div class="e-right">
        <i
          :class="envir.resType ? 'active' : ''"
          class="block-btn"
          @click="erightHandleClick(true)"
        ></i>
        <i
          :class="!envir.resType ? 'active' : ''"
          class="table-btn"
          @click="erightHandleClick(false)"
        ></i>
      </div>
    </div>
    <div v-if="envir.list.length === 0" class="nodata">
      <el-alert title="暂无数据!" type="warning" show-icon :closable="false" />
    </div>
    <div v-else>
      <div class="res-block" v-if="envir.resType">
        <div
          class="res-block-item"
          v-for="(item, index) in pagination.currentImgList"
          :class="pagination.currentImgList[index].isSelected ? 'active' : ''"
          :key="index"
        >
          <div class="res-block-item-top">
            <div class="title">{{ getEtype(item.eventType) }}</div>
          </div>
          <div
            class="res-block-item-mid"
            @click="previewHandleClick(item.imgUrl)"
          >
            <el-image
              crossorigin="anonymous"
              style="width: 100%; height: 265px"
              :src="envir.statisticUrl + item.imgUrl"
              @error="handlePictureLoadError(index)"
              fit="fill"
            />
          </div>
          <div class="res-block-item-btm">
            <div class="name">{{ getDeviceName(item.deviceId) }}</div>
            <div class="code">
              <span class="name">设备编号：</span>
              <span class="value">{{ item.deviceId }}</span>
            </div>
            <div class="time">
              <span class="name">发生时间：</span>
              <span class="value">{{
                moment(item.time).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </div>
            <el-button
              v-if="envir.isDeleting"
              type="danger"
              :icon="Delete"
              circle
              style="margin-left: 95%; background: #fc0000; cursor: pointer"
              @click="onDeleteButtonClick(item, index)"
            />
          </div>
        </div>
      </div>
      <div class="res-table" v-else>
        <div class="res-table-l">
          <div class="res-table-header">
            <div class="t-header-index">序号</div>
            <div class="t-header-thumb">图片</div>
            <div class="t-header-etype">事件类型</div>
            <div class="t-header-stype">设备类型</div>
            <div class="t-header-time">发生时间</div>
          </div>
          <div class="res-table-body">
            <div
              class="res-table-item"
              :class="envir.previewActive === index ? 'active' : ''"
              v-for="(item, index) in pagination.currentImgList"
              :key="index"
              @click="tableHandleClick(item, index)"
            >
              <div class="t-body-index">{{ index + 1 }}</div>
              <div
                class="t-body-thumb"
                :key="item.url"
                @click="previewHandleClick(item.imgUrl)"
              >
                <el-image
                  crossorigin="anonymous"
                  style="width: 50px; height: 30px"
                  :src="envir.statisticUrl + item.imgUrl"
                  @error="handlePictureLoadError(index)"
                  fit="fill"
                />
              </div>
              <div class="t-body-etype">{{ getEtype(item.eventType) }}</div>
              <div class="t-body-stype">{{ getDeviceName(item.deviceId) }}</div>
              <div class="t-body-time">
                {{ moment(item.time).format("YYYY-MM-DD HH:mm:ss") }}
              </div>
            </div>
          </div>
        </div>
        <div class="res-table-r">
          <div class="res-preview">
            <div class="res-preview-top">
              <div class="title">
                {{ getDeviceName(envir.previewEvent.deviceId) }}
              </div>
            </div>
            <div
              class="res-preview-mid"
              :key="envir.previewEvent.url"
              @click="previewHandleClick(envir.previewEvent.imgUrl)"
            >
              <el-image
                crossorigin="anonymous"
                style="width: 100%; height: 240px"
                :src="envir.statisticUrl + envir.previewEvent.imgUrl"
                fit="fill"
              />
            </div>
            <div class="res-preview-btm">
              <div class="time">
                <span class="name">发生时间：</span>
                <span class="value">{{
                  moment(envir.previewEvent.time).format("YYYY-MM-DD HH:mm:ss")
                }}</span>
              </div>
              <div class="name">
                <span class="name">描述：</span>
                <span class="value">{{
                  getEtype(envir.previewEvent.eventType)
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          :total="envir.list.length"
          layout="prev,pager,next"
          background
          @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      v-model="envir.deleteDialogVisible"
      title="确认删除？"
      width="30%"
    >
      <span>即将删除{{ envir.deleteList.length }}事件，是否确认？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="envir.deleteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onConfirmDeleteButton">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>

  <el-image-viewer
    :url-list="envir.previewList"
    :hide-on-click-modal="true"
    v-if="envir.previewShow"
    @close="previewCloseHandle"
  />
</template>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: calc(100vh - 85px);
  font-family: SourceHanSansSC;
  position: relative;

  .tabs {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-around;
    color: #ffffff;
    margin-top: 10px;

    .currentTotal {
      width: 20%;
      height: 56px;
      color: #656565;
      display: flex;
      margin-left: 20px;

      i {
        display: inline-block;
        width: 45px;
        height: 45px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("@/assets/images/project/total.png");
        margin-top: 5px;
        margin-right: 10px;
      }

      .desc {
        width: 80%;
        border: 1px solid #eef3fd;
        box-shadow: 0px 0px 4px 0px #eceefc;
        border-radius: 6px;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
        box-sizing: border-box;
        align-items: center;

        .desc-top {
          display: block;
          font-weight: bold;
          color: #6e91fb;
          font-size: 18px;
        }

        .desc-btm {
          width: 110px;
          font-size: 12px;
          cursor: pointer;

          span {
            display: block;
          }
        }

        .value {
          font-size: 30px;
          font-weight: bold;
          color: #6e91fb;
        }
      }
    }

    .tab-item {
      width: 18%;
      height: 56px;
      background: #6e91fb;
      border-radius: 8px;
      cursor: pointer;

      img {
        width: 24px;
        height: 24px;
        float: left;
        margin: 15px 20px 0px 20px;
      }

      .desc {
        width: 45%;
        float: left;
        margin-top: 8px;
        line-height: 40px;

        .desc-top {
          display: block;
          font-size: 14px;
          font-weight: bold;
        }

        .desc-btm {
          font-size: 12px;
        }
      }

      .value {
        float: right;
        margin-right: 20px;
        line-height: 56px;
        font-size: 30px;
        font-weight: bold;
      }

      &.active {
        background: linear-gradient(0deg, #ea8d13, #f6c01b);
      }
    }
  }

  .toolbar {
    width: 100%;

    :deep .el-form {
      margin-left: 65px;

      .el-form-item {
        margin-left: 10px;
        float: left;
        margin-bottom: 10px;
      }

      .el-form-item__label {
        color: #656565;
      }
    }

    .btns {
      :deep .el-form-item__content {
        margin-left: 10px !important;
        margin-top: 4px;
      }
    }
  }

  .event-num {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-around;
    color: #656565;

    .e-left {
      width: 50%;
      height: 40px;
      overflow: hidden;
      margin-left: 67px;

      > div {
        float: left;
        margin-left: 20px;
      }

      .total {
        margin-right: 20px;

        .value {
          color: #8f93f7;
        }
      }

      .danger {
        .value {
          color: #ef624a;
        }
      }
    }

    .e-right {
      width: 50%;
      height: 40px;
      overflow: hidden;

      i {
        width: 20px;
        height: 20px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        float: right;
        margin-right: 15px;
        cursor: pointer;
      }

      .block-btn {
        background-image: url("@/assets/images/project/res-block.png");

        &.active {
          background-image: url("@/assets/images/project/res-block-active.png");
        }
      }

      .table-btn {
        background-image: url("@/assets/images/project/res-table.png");

        &.active {
          background-image: url("@/assets/images/project/res-table-active.png");
        }
      }
    }

    .value {
      font-size: 20px;
      padding: 0px 5px;
      font-weight: bold;
    }
  }

  .nodata {
    width: 200px;
    margin: auto;
  }

  .res-block {
    width: 100%;
    height: calc(100vh - 260px);
    margin: auto;
    overflow: auto;
    padding-bottom: 30px;
    box-sizing: border-box;

    .res-block-item {
      width: 30%;
      height: 350px;
      border: 1px solid #eef3fd;
      box-shadow: 0px 0px 4px 0px #eceefc;
      border-radius: 6px;
      background: #ffffff;
      float: left;
      overflow: hidden;
      margin: 8px 1.5%;

      .res-block-item-top {
        width: 92%;
        height: 40px;
        line-height: 30px;
        margin: auto;
        display: flex;
        justify-content: space-between;

        .title {
          width: 65%;
          height: 40px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-image: url("@/assets/images/project/res_title.png");
          margin-top: 5px;
          color: #656565;
          font-weight: bold;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 15px;
        }

        .yellow {
          background: linear-gradient(0deg, #ea8d13, #f6c01b);
        }

        .red {
          background: linear-gradient(0deg, #ea2d13, #f66d1b);
        }

        .level {
          height: 25px;
          width: 60px;
          line-height: 25px;
          text-align: center;
          font-size: 12px;
          font-weight: bold;
          border-radius: 4px;
          color: #ffffff;
          margin-top: 10px;
        }
      }

      .res-block-item-mid {
        width: 90%;
        height: 230px;
        margin: auto;
        cursor: pointer;

        :deep .el-image {
          width: 100%;
          height: 230px !important;
        }
      }

      .res-block-item-btm {
        width: 90%;
        margin: auto;
        overflow: hidden;
        color: #656565;
        font-size: 13px;

        > div {
          float: left;
          width: 50%;
          margin-top: 5px;
        }
      }
      &.active {
        background: #6e91fb;
      }
    }
  }

  .res-table {
    width: 100%;
    height: calc(100vh - 240px);
    margin: auto;
    overflow: hidden;
    padding: 0px 30px;
    box-sizing: border-box;
    padding-bottom: 30px;
    display: flex;
    color: #656565;
    justify-content: space-around;

    .res-table-l {
      width: calc(100% - 430px);

      .res-table-header {
        width: 100%;
        height: 40px;
        background: #ecedff;
        display: flex;
        justify-content: space-around;

        > div {
          width: 20%;
          text-align: center;
          line-height: 40px;
          font-weight: bold;
        }

        .t-header-index {
          width: 100px;
        }

        .t-header-level {
          width: 200px;
        }
      }

      .res-table-body {
        width: 100%;
        height: calc(100vh - 300px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 40px;
        box-sizing: border-box;

        .res-table-item {
          width: 100%;
          box-shadow: 0px 0px 4px 0px #eceefc;
          background: #ffffff;
          margin-top: 5px;
          border: 1px solid #eaf1fc;
          border-radius: 6px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          cursor: pointer;

          > div {
            width: 20%;
            text-align: center;
            padding: 5px 0px;
            font-size: 13px;
          }

          .t-body-index {
            width: 100px;
          }

          .t-body-level {
            width: 200px;

            span {
              padding: 5px 10px;
              opacity: 0.77;
              border-radius: 4px;
              color: #ffffff;
              font-size: 12px;
            }

            .yellow {
              background: linear-gradient(0deg, #ea8d13, #f6c01b);
            }

            .red {
              background: linear-gradient(0deg, #ea2d13, #f66d1b);
            }
          }

          &.active {
            background: #998ef6;
            color: #ffffff;
          }
        }
      }
    }

    .res-table-r {
      width: 400px;
      height: 400px;
      border: 1px solid #eef3fd;
      box-shadow: 0px 0px 4px 0px #eceefc;
      border-radius: 6px;

      .res-preview {
        width: 95%;
        margin: auto;

        .res-preview-top {
          width: 100%;
          height: 40px;
          line-height: 40px;
          text-indent: 5px;
        }

        .res-preview-mid {
          width: 100%;
          height: 240px;
          cursor: pointer;

          video {
            width: 100%;
            height: 100%;
            object-fit: fill;
          }
        }

        .res-preview-btm {
          width: 100%;
          font-size: 13px;
          text-indent: 10px;
          margin-top: 10px;

          > div {
            margin-bottom: 5px;
          }

          .yellow .value {
            color: #ea8d13;
          }

          .red .value {
            color: #ea2d13;
          }
        }
      }
    }
  }
  .pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 5px 0px;
    box-sizing: border-box;
    position: absolute;
    bottom: 0px;
    padding-bottom: 10px;
    background: #ffffff;
  }
}
</style>
